<template>
    <section class="prdListWrap">

        <mt-navbar v-model="selected" fixed>
            <mt-tab-item v-for="(item,index) in tablist" :key="index" :id="item.id" @click.native.capture="tabchange(item.id)">{{item.name}}</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <!-- <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" style="padding-top: 49px;">
            <mt-cell v-for="(item,index) in newslist" :key="index" :title="item.title" @click.native.capture="listdetail(item.id)" is-link class="text-left">
                <span class="author">{{item.nickname}}</span>
                <span style="font-size: 12px;">{{item.showPubTime}}</span>
            </mt-cell>
        </ul> -->

        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" @top-status-change="handleTopChange" style="padding-top: 49px;">

            <mt-cell v-for="(item,index) in newslist" :key="index" :title="item.title" @click.native.capture="listdetail(item.id)" is-link class="text-left">
                <span class="author">{{item.nickname}}</span>
                <span style="font-size: 12px;">{{item.showPubTime}}</span>
            </mt-cell>

            <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                <span v-show="topStatus === 'loading'">Loading...</span>
            </div>
        </mt-loadmore>

    </section>
</template>
<style>
    .author{
        padding-right: 8px;
    }
</style>
<script>
    import conf from '../config/userconf.js'
    export default {
        name: 'coming',
        data(){
            return{
                newslist: [],
                page: 1,  //页码
                selected: 2,  //tab切换默认选中
                tablist: [
                    {id: 2, name:'本科室'},
                    {id: 1, name:'全院'},
                ],
            }
        },
        methods: {
            init(data=Object()){
                data.page = this.page;
                data.scope = this.selected;    //1 全院 2 本科
                // console.log(this.selected);

                this.loading = true;

                conf.exams.noticepageList(data,(state,res)=>{
                    if (state == 'success'&&res.data.status == 1){
                        console.log(res.data);

                        this.loading = false;

                        this.newslist = res.data.other.list;
                        
                    }else if(state == 'success'&&res.data.status != 1){
                        this.$toast(res.data.message);
                    }
                })
            },
            //tab切换
            tabchange(val){
                // console.log(val);
                this.selected = val;
                this.init();
            },
            // loadMore() {
            //     this.page++;
            //     this.init();
            // },
            listdetail(id){
                // console.log(id);
                this.$router.push({
                    path: '/news',
                    query: {
                        id: id
                    }
                })
            },
            handleTopChange(status) {
                console.log('----------status------------',status);
                this.topStatus = status;
            },
            loadTop(){      //  刷新数据
                console.log('----------loadTop-----------');
                this.$refs.loadmore.onTopLoaded();
            },
            loadBottom(){     // 加载更多
                console.log('----------loadBottom-----------');
                // this.$refs.loadmore.onBottomLoaded();

                setTimeout(() => {

                    for (let i = 1; i <= 3; i++) {
                        this.examlist.push({
                            id: i,
                            name: '张三',
                            tel: '152****0011',
                            fraction: '50分',
                            title:'2018期中考',
                            src: '../assets/images/user.png'                    
                        },);
                    }
                    this.$refs.loadmore.onBottomLoaded();

                }, 500);

            },

        },
        mounted() {
            this.init();
            document.title = "消息列表";
        }
    }
</script>
